<template>
  <div id="Update">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>体育锻炼知识管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/KnowledgeManager' }">体育锻炼知识</el-breadcrumb-item>
      <el-breadcrumb-item>体育锻炼知识修改</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-form :model="updForm" :inline="true" :rules="rules" size="mini" ref="updForm" label-width="200px" class="demo-ruleForm">
        <el-form-item label="项目名称" prop="exercisesName">
          <el-input v-model="updForm.exercisesName" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="项目内容" prop="exercisesContent">
          <el-input v-model="updForm.exercisesContent" type="textarea"  style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="收获" prop="exercisesGood">
          <el-input v-model="updForm.exercisesGood" type="textarea"  style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="项目图片">
              <el-image
                  style="width: 120px; height: 100px"
                  :src="updForm.photo"
                  fit="contain">
              </el-image>
          <el-upload
                :data="updForm"
                :limit="1"
                :on-success="handleSuccess"
                ref="upload"
                name="exercisePicture"
                :file-list="fileList"
                list-type="picture"
                :auto-upload="true"
                class="upload-demo"
                drag
                action="http://localhost:8080/TYG_sys/exercises-info/upLoad"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="发布人员" prop="workId">
          <el-select v-model="updForm.workId" placeholder="请选择发布人员" size="mini" style="width: 500px">
            <el-option
                v-for="(v,index) in workIdList"
                :key="index"
                :label="v.workName"
                :value="v.workId"></el-option>
          </el-select>
        </el-form-item>
        <div class="btn_opt">
          <el-form-item style="margin-left: 200px">
            <el-button type="primary" @click="submitForm('updForm')">修改</el-button>
            <el-button @click="resetForm('updForm')">重置</el-button>
          </el-form-item>
        </div>

      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "UpdatExercise",
  data(){
    return{
      exercisesName:"",
      exercisesContent:"",
      exercisesGood:"",
      status:"",
      photo:"",
      workIdList:[],
      fileList:[],
      exercisesId: "",
      updForm:{
        exercisesName:"",
        exercisesContent:"",
        exercisesGood:"",
        status:"",
        photo:"",
        workId:"",
      },
      rules:{
        exercisesName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
        exercisesContent: [
          { required: true, message: '请输入项目内容', trigger: 'change' }
        ],
        exercisesGood: [
          { required: true, message: '请输入项目收获', trigger: 'change' }
        ],
      }
    }
  },

  methods:{

    submitForm(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){
          this.$axios.post("/exercises-info/updForm",this.updForm).then(res=>{
            console.log(res)
            if (res.data.code ==200){
              this.$message.success("修改成功")
              console.log(res)

            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err=>{
            console.log(err)
          })
        }else{
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleSuccess(response, file, fileList){
      if(response.code === 200){
        this.$message.success("图片上传成功")
      }else{
        this.$message.error("图片上传失败")
      }},

    //发布人员
    getWorkId(){
      this.$axios.post("/user-info/getWorkId").then(res=>{
        console.log(res)
        this.workIdList=res.data.data
      })
    },
  },

  created() {

    this.getWorkId()

    var exercisesId=this.$route.params.exercisesId;
    console.log(exercisesId)
    this.$axios.post("/exercises-info/getExercisesById","exercisesId="+exercisesId).then(res=>{
      var exercise=res.data.data
      console.log(exercise)
      this.updForm={
          exercisesId:exercise.exercisesId,
          exercisesName:exercise.exercisesName,
          exercisesContent:exercise.exercisesContent,
          exercisesGood:exercise.exercisesGood,
          status:exercise.status,
          photo:exercise.photo,
          workId:exercise.workId,
      }
    })
  }
}
</script>

<style scoped>
.el-breadcrumb{
  margin-bottom: 20px;
}
</style>
